<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<style>
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
    background: #3c8dbc;
    color: #ffffff;
    z-index: 99999;
    position: relative;
    right: 100px;
}
</style>
<div>
    <div ng-style="{'background-color': wall.wallOptions.headerColour}" ng-class="getHeaderClass()">
        <div ng-style="{'color': wall.wallOptions.headerForeColour} " class="hashtag col-md-4">{{wall.wallOptions.mainHashtag}}</div>
        <div ng-style="{'color': wall .wallOptions.headerForeColour} " class="event-name col-md-4">
            <div><img ng-if="wall.wallOptions.logo" class="wall-preview-logo" data-ng-src="data:{{wall.wallOptions.logo.filetype}};base64,{{wall.wallOptions.logo.base64}}">
                <div ng-hide="!wall.wallOptions.showEventName" class="wall-header-eventname">{{wall.wallOptions.eventName}}</div>
            </div>
        </div>
        <div class="banner col-md-3"><a ng-hide="!wall.wallOptions.showLoklakLogo" ng-style="{'color': wall.wallOptions.headerForeColour} " href="/">Powered by Loklak.net</a></div>
        <div class="banner col-md-1">
            <!-- <i ng-style="{'color': wall.wallOptions.headerForeColour} " data-toggle="modal" data-target="#wall-modal" class="fa fa-fw fa-gear"></i> -->
            <i ng-style="{'color': wall.wallOptions.headerForeColour} " ng-hide="wall.fullscreenEnabled" ng-click="fullscreen()" class="fa fa-fw fa-arrows-alt"></i>
        </div>
    </div>
    <div class="wall-container container-fluid">
        <div class="container content-container wall-body" ng-style="((wall.wallOptions.layoutStyle==2)&&(wall.statuses.length>0))?{'margin-left':'-5px'}:{}">
            <div ng-switch on="wall.wallOptions.layoutStyle" ng-show="wall.statuses.length>0" ng-class="wall.wallOptions.showStatistics?'col-md-8':'col-md-12'">
                <div ng-switch-when="1" ng-animate ng-enter ng-enter-pending ng-repeat="status in wall.statuses" linear open="wall.open" data="status" class="animate-repeat"></div>
                <div ng-switch-when="2" class="animate-repeat" ng-repeat="status in wall.statuses" card open="wall.open" data="status" leaderboardEnabled="{{wall.wallOptions.showStatistics}}"></div>
                <div ng-switch-when="3" class="animate-repeat" ng-repeat="status in wall.statuses" coa open="wall.open" data="status"></div>
                <div ng-switch-when="4">
                    <div data="wall.statuses" id="map" maplayout style="margin-left:-48px; margin-top:-10px;" ng-style="wall.wallOptions.showStatistics?{}:{'margin-right':'-48px'}" cycleTweets="{{wall.wallOptions.cycle}}"></div>
                </div>
            </div>
            <div ng-if="wall.wallOptions.showStatistics && wall.statuses.length>0" class="col-md-4">
                <h4>LEADERBOARD</h4>
                <div class="row leaderboard-container">
                    <img class="histogram-loader" ng-hide="wall.topTwitterersData" src="images/loading.gif">
                    <div class="nav-tabs-custom" style="margin: 0 15px;" ng-mouseover="stopLeaderboardTimer()" ng-mouseleave="startLeaderboardTimer()">
                        <ul class="nav nav-tabs">
                            <li class="active" ng-style="getTabStyle(this)">
                                <a data-toggle="tab" href="#tab-twitterers">Top Twitterers</a>
                            </li>
                            <li ng-style="getTabStyle(this)">
                                <a data-toggle="tab" href="#tab-hashtags">Top Hashtags</a>
                            </li>
                            <li ng-style="getTabStyle(this)">
                                <a data-toggle="tab" href="#tab-mentions">Top Mentions</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="tab-twitterers">
                                <!-- <canvas class="chart chart-pie" options="wall.topTwitterersOptions" labels="wall.topTwitterersLabels" data="wall.topTwitterersData"></canvas> -->
                                <table class="table leaderboard">
                                    <tbody>
                                        <tr class="leaderboard-item" ng-repeat="obj in wall.topTwitterersData">
                                            <td style="width: 11vh;" style="width: 11vh;">
                                                <img ng-src="http://avatars.io/twitter/{{obj[0]}}" alt="">
                                                <span ng-style="{'background-color': wall.wallOptions.headerColour, 'color': wall.wallOptions.headerForeColour}" class="label leaderboard-label">{{obj[1]}}</span>
                                            </td>
                                            <td class="leaderboard-text">
                                                <a ng-href="{{'./search?q=from:' +  obj[0]}}" target="_blank">@{{obj[0]}}</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="tab-hashtags">
                                <!-- <canvas class="chart chart-pie" options="wall.topHashtagsOptions" labels="wall.topHashtagsLabels" data="wall.topHashtagsData"></canvas> -->
                                <table class="table">
                                    <tbody>
                                        <tr class="leaderboard-item" ng-repeat="obj in wall.topHashtagsData">
                                            <td style="width: 11vh;">
                                                <div ng-style="{'background-color': wall.wallOptions.headerColour, 'color': wall.wallOptions.headerForeColour}" class="leaderboard-count">{{obj[1]}}</div>
                                            </td>
                                            <td class="leaderboard-text">
                                                <a ng-href="{{'./search?q=#' +  obj[0]}}" target="_blank">#{{obj[0]}}</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="tab-mentions">
                                <!-- <canvas class="chart chart-pie" options="wall.topHashtagsOptions" labels="wall.topHashtagsLabels" data="wall.topHashtagsData"></canvas> -->
                                <table class="table">
                                    <tbody>
                                        <tr class="leaderboard-item" ng-repeat="obj in wall.topMentionsData">
                                            <td style="width: 11vh;" style="width: 11vh;">
                                                <img ng-src="http://avatars.io/twitter/{{obj[0]}}" alt="">
                                                <span ng-style="{'background-color': wall.wallOptions.headerColour, 'color': wall.wallOptions.headerForeColour}" class="label leaderboard-label">{{obj[1]}}</span>
                                            </td>
                                            <td class="leaderboard-text">
                                                <a ng-href="{{'./search?q=@' +  obj[0]}}" target="_blank">@{{obj[0]}}</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row histogram-container" ng-style="wall.wallOptions.headerPosition == 'Bottom'?{'bottom':'120px'}:{}">
                    <div class="row histogram-gradient"></div>
                    <div class="box box-default" style="margin: 0 15px;">
                        <div class="box-header with-border">
                            <h3 class="box-title">TWEETS FREQUENCY</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <img class="histogram-loader" ng-hide="wall.histogram2" src="images/loading.gif">
                                <canvas id="wallHistogram" class="chart chart-bar wall-histogram" options="wall.histogramOptions" labels="wall.labels" data="wall.histogram2"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-show="wall.statuses.length<=0 && !wall.showEmpty && !wall.invalidId" class="col-md-12">
                <div class="loading-redirect" style="text-align: center;"><span id="bull1">&bull;</span><span id="bull2">&bull;</span><span id="bull3">&bull;</span></div>
                <h2 id="redirect-text">Loading your tweet wall...</h2>
            </div>
            <div ng-hide="!wall.showEmpty" class="col-md-12" style="text-align: center;">
                <h3>No tweets to show yet. Try changing the search parameters or come back here after some time!</h3>
            </div>
            <div ng-hide="!wall.invalidId" class="col-md-12" style="text-align: center;">
                <img src="images/loklak_icon_yellow_45x45_transparent.png">
                <h3>This wall does not exist. Please check the URL.</h3>
            </div>
        </div>
    </div>
</div>
<div ng-include="'wall/wallCreationModal.html'"></div>
